<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购">
  <meta name="description" content="品优购-专业的综合网上购物商城">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
  <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./style/reset.css">
  <link rel="stylesheet" href="./style/common.css">
  <link rel="stylesheet" href="./style/swiper.css">
  <link rel="stylesheet" href="./style/index.css">
  <link rel="stylesheet" href="./style/iconfont.css">
</head>

<body>
  <!-- 头部 -->
  <header>
    <!-- 快捷导航栏 -->
    <div class="shortcut">
      <div class="shortcut-content center">
        <div class="shortcut-left fl">
          <div class="welcome">品优购欢迎您！请
            <a href="./pages/login.html">登录</a>
            <a href="./pages/reqister.html">免费注册</a>
          </div>
        </div>
        <div class="shortcut-right fr">
          <ul>
            <li>
              <a href="./pages/order.html">我的订单</a>
              <span>|</span>
            </li>
            <li>
              <a href="./pages/mine.html">个人中心</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- Logo区 -->
    <div class="logo-area center">
      <!-- 
        开发步骤：1）分析页面；2）HTML布局；3）样式。
       -->
      <!-- logo -->
      <h1 class="fl">
        <a href="index.html">
          <img src="./images/logo.png" alt="logo">
        </a>
      </h1>
      <!-- 搜索 -->
      <div class="search fl">
        <input type="text" placeholder="请搜索内容...">
        <button>搜索</button>
      </div>
      <!-- 购物车 -->
      <div class="cart fr">
        <i class="iconfont icon-cart"></i>
        我的购物车
        <span>0</span> <!-- 徽章-->
        <i class="iconfont icon-xiangyoujiantou"></i>
      </div>
    </div>
    <div class="nav-banner">
      <!-- 主导航栏 -->
      <nav>
        <div class="nav-content center">
          <div class="nav-classic fl">
            <div class="nav-title">全部商品分类</div>
            <ul class="nav-classic-list">
              <li>
                <div class="classic-name">手机<span class="iconfont icon-xiangyoujiantou icon"></span></div>
                <ul class="nav-classic-item">
                  <li>
                    <a href="#">
                      <img src="./images/m1.png" alt="商品">
                      <span class="goods-name">HUAWEI P系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/m2.png" alt="商品">
                      <span class="goods-name">HUAWEI Mate系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/m3.png" alt="商品">
                      <span class="goods-name">HUAWEI Nova系列</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <div class="classic-name">笔记本<span class="iconfont icon-xiangyoujiantou"></span></div>
                <ul class="nav-classic-item">
                  <li>
                    <a href="#">
                      <img src="./images/m1.png" alt="商品">
                      <span class="goods-name">HUAWEI P系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/m2.png" alt="商品">
                      <span class="goods-name">HUAWEI Mate系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/m3.png" alt="商品">
                      <span class="goods-name">HUAWEI Nova系列</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <div class="classic-name">平板<span class="iconfont icon-xiangyoujiantou"></span></div>
                <ul class="nav-classic-item">
                  <li>
                    <a href="#">
                      <img src="./images/m1.png" alt="商品">
                      <span class="goods-name">HUAWEI P系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/m2.png" alt="商品">
                      <span class="goods-name">HUAWEI Mate系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/m3.png" alt="商品">
                      <span class="goods-name">HUAWEI Nova系列</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <div class="classic-name">智能穿戴<span class="iconfont icon-xiangyoujiantou"></span></div>
                <ul class="nav-classic-item">
                  <li>
                    <a href="#">
                      <img src="./images/w1.png" alt="商品">
                      <span class="goods-name">HUAWEI P系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/w2.png" alt="商品">
                      <span class="goods-name">HUAWEI Mate系列</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <div class="classic-name">智能家具<span class="iconfont icon-xiangyoujiantou"></span></div>
                <ul class="nav-classic-item">
                  <li>
                    <a href="#">
                      <img src="./images/m1.png" alt="商品">
                      <span class="goods-name">HUAWEI P系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/m2.png" alt="商品">
                      <span class="goods-name">HUAWEI Mate系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/m3.png" alt="商品">
                      <span class="goods-name">HUAWEI Nova系列</span>
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <div class="classic-name">电视<span class="iconfont icon-xiangyoujiantou"></span></div>
                <ul class="nav-classic-item">
                  <li>
                    <a href="#">
                      <img src="./images/m1.png" alt="商品">
                      <span class="goods-name">HUAWEI P系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/m2.png" alt="商品">
                      <span class="goods-name">HUAWEI Mate系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/m3.png" alt="商品">
                      <span class="goods-name">HUAWEI Nova系列</span>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <ul class="nav-main fl">
            <li>
              <a href="#">手机</a>
            </li>
            <li>
              <a href="#">笔记本</a>
            </li>
            <li>
              <a href="#">平板</a>
            </li>
          </ul>
        </div>
      </nav>
      <!-- banner -->
      <div class="banner center">
        <!-- 
        轮播图：按设定的时间依次播放对应的图片，通常用于产品展示或公司宣传等。由组图、控制器和计数器三部分组成。
       -->
        <!-- 1.组图 -->
        <!-- 
        swiper（轮播图）插件使用步骤：
          参考网站：https://www.swiper.com.cn/cdn/index.html
          1.引入swiper.css和swiper.js文件；
            <link rel="stylesheet" href="./style/swiper.css">
            <script src="./javascript/swiper.js"></script>
          2.复制HTML代码；
            <div class="swiper">
              <div class="swiper-wrapper">
                  <div class="swiper-slide">Slide 1</div>
                  <div class="swiper-slide">Slide 2</div>
                  <div class="swiper-slide">Slide 3</div>
              </div>
              <div class="swiper-pagination"></div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
          3.复制JS代码（初始化swiper）；
            <script>        
              var mySwiper = new Swiper ('.swiper', {
                loop: true, // 循环模式选项
                autoplay: true, // 自动播放
                // 分页器
                pagination: {
                  el: '.swiper-pagination',
                },    
                // 前进后退按钮
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                }
              })        
            </script>
          4.复制或编写CSS；
            .swiper {
              width: 600px;
              height: 300px;
            }
          5.添加要播放的组图；
            <div class="swiper-slide">
              <a href="#">
                <img src="./images/banner1.jpeg" alt="banner">
              </a>
            </div>
          6.调整样式。
      -->
        <div class="swiper">
          <!-- 组图 -->
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#">
                <img src="./images/banner1.jpeg" alt="banner">
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="./images/banner2.png" alt="banner">
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="./images/banner3.jpeg" alt="banner">
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="./images/banner4.jpeg" alt="banner">
              </a>
            </div>
          </div>
          <!-- 分页器（计数器） -->
          <div class="swiper-pagination"></div>
          <!-- 导航按钮（控制器） -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
    </div>
  </header>
  <!-- 主体 -->
  <main>
    <!-- 精品推荐 -->
    <div class="product center">
      <!-- 产品标题 -->
      <div class="product-title">
        <div class="title fl">精品推荐</div>
      </div>
      <!-- 产品清单 -->
      <ul class="product-list">
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m2.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 手机 -->
    <div class="product center">
      <!-- 产品标题 -->
      <div class="product-title">
        <div class="title fl">手机</div>
        <ul class="pro-classic fl">
          <li><a href="#">HUAWEI P系列</a></li>
          <li><a href="#">HUAWEI Mate系列</a></li>
          <li><a href="#">HUAWEI Nova系列</a></li>
        </ul>
        <div class="more fr">
          <a href="#">查看更多</a>
        </div>
      </div>
      <!-- 产品清单 -->
      <ul class="product-list">
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m2.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 笔记本 -->
    <div class="product center">
      <!-- 产品标题 -->
      <div class="product-title">
        <div class="title fl">笔记本</div>
        <ul class="pro-classic fl">
          <li><a href="#">HUAWEI P系列</a></li>
          <li><a href="#">HUAWEI Mate系列</a></li>
          <li><a href="#">HUAWEI Nova系列</a></li>
        </ul>
        <div class="more fr">
          <a href="#">查看更多</a>
        </div>
      </div>
      <!-- 产品清单 -->
      <ul class="product-list1">
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m2.png" alt="商品">
            <div class="pro-name">HUAWEI Mate40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
      </ul>
    </div>
    <!-- iPad -->
    <div class="product center">
      <!-- 产品标题 -->
      <div class="product-title">
        <div class="title fl">平板</div>
        <ul class="pro-classic fl">
          <li><a href="#">HUAWEI P系列</a></li>
          <li><a href="#">HUAWEI Mate系列</a></li>
        </ul>
        <div class="more fr">
          <a href="#">查看更多</a>
        </div>
      </div>
      <!-- 产品清单 -->
      <ul class="product-list1">
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m2.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 智能穿戴 -->
    <div class="product center">
      <!-- 产品标题 -->
      <div class="product-title">
        <div class="title fl">智能穿戴</div>
        <ul class="pro-classic fl">
          <li><a href="#">HUAWEI P系列</a></li>
          <li><a href="#">HUAWEI Mate系列</a></li>
        </ul>
        <div class="more fr">
          <a href="#">查看更多</a>
        </div>
      </div>
      <!-- 产品清单 -->
      <ul class="product-list1">
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m2.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 智能家具 -->
    <div class="product center">
      <!-- 产品标题 -->
      <div class="product-title">
        <div class="title fl">智能家具</div>
        <ul class="pro-classic fl">
          <li><a href="#">HUAWEI P系列</a></li>
          <li><a href="#">HUAWEI Mate系列</a></li>
        </ul>
        <div class="more fr">
          <a href="#">查看更多</a>
        </div>
      </div>
      <!-- 产品清单 -->
      <ul class="product-list1">
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m2.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 电视 -->
    <div class="product center">
      <!-- 产品标题 -->
      <div class="product-title">
        <div class="title fl">电视</div>
        <ul class="pro-classic fl">
          <li><a href="#">HUAWEI P系列</a></li>
          <li><a href="#">HUAWEI Mate系列</a></li>
        </ul>
        <div class="more fr">
          <a href="#">查看更多</a>
        </div>
      </div>
      <!-- 产品清单 -->
      <ul class="product-list1">
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m1.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
        <li class="product-item">
          <a href="#">
            <img src="./images/p-m2.png" alt="商品">
            <div class="pro-name">HUAWEI Mate 40 Pro</div>
            <div class="pro-price">￥6499.00</div>
          </a>
        </li>
      </ul>
    </div>
  </main>
  <!-- 尾部 -->
  <footer>
    <div class="footer center">
      <!-- 提供服务 -->
      <ul class="service">
        <li>
          <div class="service-img"></div>
          <div class="service-title">正品保障</div>
          <div class="service-content">正品保障，提供发票</div>
        </li>
        <li>
          <div class="service-img"></div>
          <div class="service-title">正品保障</div>
          <div class="service-content">正品保障，提供发票</div>
        </li>
        <li>
          <div class="service-img"></div>
          <div class="service-title">正品保障</div>
          <div class="service-content">正品保障，提供发票</div>
        </li>
        <li>
          <div class="service-img"></div>
          <div class="service-title">正品保障</div>
          <div class="service-content">正品保障，提供发票</div>
        </li>
        <li>
          <div class="service-img"></div>
          <div class="service-title">正品保障</div>
          <div class="service-content">正品保障，提供发票</div>
        </li>
      </ul>
      <!-- 指南 -->
      <div class="help">
        <dl>
          <dt>购物指南</dt>
          <dd><a href="#">购物流程</a></dd>
          <dd><a href="#">配送方式</a></dd>
          <dd><a href="#">支付方式</a></dd>
          <dd><a href="#">常见问题</a></dd>
          <dd><a href="#">客户服务</a></dd>
        </dl>
        <dl>
          <dt>购物指南</dt>
          <dd><a href="#">购物流程</a></dd>
          <dd><a href="#">配送方式</a></dd>
          <dd><a href="#">支付方式</a></dd>
          <dd><a href="#">常见问题</a></dd>
          <dd><a href="#">客户服务</a></dd>
        </dl>
        <dl>
          <dt>购物指南</dt>
          <dd><a href="#">购物流程</a></dd>
          <dd><a href="#">配送方式</a></dd>
          <dd><a href="#">支付方式</a></dd>
          <dd><a href="#">常见问题</a></dd>
          <dd><a href="#">客户服务</a></dd>
        </dl>
        <dl>
          <dt>购物指南</dt>
          <dd><a href="#">购物流程</a></dd>
          <dd><a href="#">配送方式</a></dd>
          <dd><a href="#">支付方式</a></dd>
          <dd><a href="#">常见问题</a></dd>
          <dd><a href="#">客户服务</a></dd>
        </dl>
        <dl>
          <dt>购物指南</dt>
          <dd><a href="#">购物流程</a></dd>
          <dd><a href="#">配送方式</a></dd>
          <dd><a href="#">支付方式</a></dd>
          <dd><a href="#">常见问题</a></dd>
          <dd><a href="#">客户服务</a></dd>
        </dl>
        <dl>
          <dt>手机客户端</dt>
          <dd>
            <img src="./images/erweima.png" alt="品优购">
          </dd>
          <dd>品优购客户端</dd>
        </dl>
      </div>
      <!-- 外链接+公司相关信息 -->
      <div class="link-copyright">
        <ul class="link">
          <li><a href="#">关于我们</a></li>
          <li><a href="#">联系我们</a></li>
          <li><a href="#">联系客服</a></li>
          <li><a href="#">商家入驻</a></li>
          <li><a href="#">营销中心</a></li>
          <li><a href="#">手机品优购</a></li>
          <li><a href="#">友情链接</a></li>
          <li><a href="#">销售联盟</a></li>
          <li><a href="#">品优购社区</a></li>
          <li><a href="#">品优购公益</a></li>
        </ul>
        <p>
          地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: abc.cn<br />皖ICP备08001421号
        </p>
      </div>
    </div>
  </footer>
  <!-- 侧边栏 -->
  <aside>
    <ul>
      <li><a href="javascript:void(0);">手机</a></li>
      <li><a href="javascript:void(0);">笔记本</a></li>
      <li><a href="javascript:void(0);">平板</a></li>
      <li><a href="javascript:void(0);">智能穿戴</a></li>
      <li><a href="javascript:void(0);">智能家具</a></li>
      <li><a href="javascript:void(0);">电视</a></li>
    </ul>
    <div class="to-top">
      <a href="javascript:void(0)">回到顶部</a> <!-- javascript:void(0)：去掉a标签跳转的默认形为 -->
    </div>
  </aside>
</body>
<script src="./javascript/swiper.js"></script>
<script src="./javascript/jquery.js"></script>
<script>
  // 轮播图
  var mySwiper = new Swiper('.swiper', {
    loop: true, // 循环模式选项
    autoplay: true, // 自动播放
    speed: 300,
    freeMode: true,
    effect: 'slide',
    // 分页器
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets'
    },
    // 前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  })
  // 侧边栏
  changeStyle();
  $(window).scroll(function(){ // 当窗口滚动条滚动时触发scroll事件
    changeStyle();
  })
  // 抽离公共代码，形成函数，方便多次调用
  function changeStyle(){
    // 获取滚动条的位置
    let pos = Math.floor($(this).scrollTop()); // $(this)表示当前对象window，scrollTop()获取当前滚动条离顶端的距离，Math.floor()向下取整，let用于定义变量
    // console.log(pos);
    // 如果滚动条在500+及以上，则显示侧边栏，否则则隐藏
    if(pos >= 500){ 
      $('aside').css('display','block');
    } else {
      $('aside').css('display','none');
    }
    // 根据滚动条位置设置侧边栏样式
    if(pos >= 500 && pos < 1070){ // 如果滚动条在[500,1070)区间，则调用函数changePos()
      changePos(0);
    } else if(pos >= 1070 && pos < 1250){ // 否则，如果滚动条在[1070,1250)区间
      changePos(1);
    } else if(pos >= 1250 && pos < 1500){
      changePos(2);
    } else if(pos >= 1500 && pos < 1750){
      changePos(3);
    } else if(pos >= 1750 && pos < 1875){
      changePos(4);
    } else if(pos >= 1875){
      changePos(5);
    }
  }
  // 函数封装
  function changePos(idx){
    $('aside li').removeClass('active'); // 移出aside下所有li标签中的active类
    $('aside li').eq(idx).addClass('active'); // 为aside下指定的li标签添加active类
  }
  // 回到顶端
  $('.to-top').click(function(){ // 当单击class为to-top的标签时，将执行回调函数
    // $(window).scrollTop(0); // 设置滚动条移动到窗口顶端
    $(window.opera ? 'html' : 'html, body').animate({ // 为所有浏览器添加动画
      scrollTop: 0 // 滚动条滚动到顶部
    }, 1000) // 滚动条滚动的时间，默认单位为ms
  })
  // 单击li标签，滚动到指定位置
  $('aside li').eq(0).click(function(){
    scrollLi(700);
  })
  $('aside li').eq(1).click(function(){
    scrollLi(1100);
  })
  $('aside li').eq(2).click(function(){
    scrollLi(1400);
  })
  $('aside li').eq(3).click(function(){
    scrollLi(1600);
  })
  $('aside li').eq(4).click(function(){
    scrollLi(1700);
  })
  $('aside li').eq(5).click(function(){
    scrollLi(100);
  })
  function scrollLi(pos){
    $(window.opera ? 'html' : 'html, body').animate({
      scrollTop: pos
    }, 1000)
  }
</script>
</html>